import ImageViewer from '@/components/imageViewer';
// import Highlight from '@/components/highlight';
const Highlight = import('@/components/highlight')
import { FC, useEffect } from 'react';
import { IRouteComponentProps, useDispatch, useSelector, ArticleModelState } from 'umi';
import './detail.less';
import {share} from '@/components/share';

const ArticleDetailPage: FC<IRouteComponentProps<{id: string}>> = (props) => {
  const id = props.match.params.id;
  const {artilceDetail} = useSelector((state: {article: ArticleModelState})=>state.article);

  const dispatch = useDispatch();

  useEffect(()=>{
    dispatch({
      type: 'article/getArticleDetail',
      payload: id
    })

    dispatch({
      type: 'article/getArticleDetail',
      payload: id
    })
    dispatch({
      type: 'article/getArticleDetail',
      payload: id
    })
  }, []);

  return (
    <div>
      <h1>Detail Page</h1>
      <Highlight>
        <ImageViewer>
          <div id="articleDetail">
            <img src={artilceDetail.cover} alt="" />
            <div dangerouslySetInnerHTML={{__html: artilceDetail.html}}></div>
          </div>
        </ImageViewer>
      </Highlight>
      <div>
        <button onClick={()=>share(artilceDetail)}>分享</button>
      </div>
    </div>
  );
}

export default ArticleDetailPage;
